<template>
    <div>
        <div class="e-form">
            <BillTop @cancel="handleClose"></BillTop>
            <div class="tabs" style="margin-bottom:120px">
                <div class="tabs-title">基本信息</div>
                <div style="width: 100%" class="form">
                    <el-form :model="formData" :label-width="formLabelWidth">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="合同编号：">
                                    <el-input v-model="formData.facilityIncomeNo" autocomplete="off" placeholder="选择设备废旧处置合同">
                                        <i
                                            class="
                                                el-icon-document-copy
                                            "
                                            slot="suffix"
                                        >
                                        </i>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="合同名称：">
                                    <el-input v-model="formData.facilityIncomeName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="不含税金额(元)：">
                                    <span>{{formData.amountWithoutTax}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="币种：">
                                   <el-select v-model="formData.currencyName" @change="changeCurrency" placeholder="请选择">
                                        <el-option
                                            v-for="(
                                                item
                                            ) in currencyArr"
                                            :key="item.kvId"
                                            :label="item.kvKey"
                                            :value="item.kvKey"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="税率%：">
                                    <el-input v-model="formData.taxRate"  v-enter-number autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="税额(元)：">
                                    <el-input v-model="formData.tax" v-enter-number autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="原合同金额(元)：">
                                    <span>{{formData.rmbAmount}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="变更后合同金额(元)：">
                                    <span>{{formData.rmbAmount}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="变更次数：">
                                    <span>{{formData.timeOfChange}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态：">
                                     <span>{{options.stateForm[formData.state]}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="经办人：">
                                    <span>{{formData.founderName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="签约人：">
                                    <el-input v-model="formData.signatoryName" autocomplete="off">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="签订日期：">
                                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="formData.signingDate"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="录入日期：">
                                    <span>{{formData.gmtCreate}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <el-row>
                            <el-col :span="12">
                                <el-form-item label="所属机构：">
                                    <span>{{formData.orgName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="传输财务共享：">
                                    <span>{{formData.isEas}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="签订地点：">
                                    <SelectAddr v-model="ctAddressCode" @getLabel="getAddrLabel"
                                        lazy
                                        showCountry
                                        style="width:49%;"
                                    ></SelectAddr>
                                    <el-input v-model="formData.signingAddress
                                        " placeholder="详细地址" style="width:49%;margin-left:2%">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注：">
                                    <el-input type="textarea" v-model="formData.remarks" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="本位币：">
                                    <span>{{formData.baseCurrency}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人民币汇率：">
                                    <span>{{formData.rmbRate}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="本位币汇率：">
                                    <span>{{formData.baseExchangeRate}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="buttons">
                <el-button type="primary" size="small" style="background: #2e61d7" @click="addSave"
                    >保存</el-button
                >
                <el-button size="small" @click="handleClose">关闭</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import SelectAddr from '@/components/common/addrComp'
import equipmentIncome from '@/api/balanceContractApi/equipmentIncome.js'
import call from '@/api/balanceContractApi/getCurrency.js'
export default {
    data () {
        return {
            //基础信息
            formData: {
                'amountAfterChange': null,
                'amountWithoutTax': null,
                'aorgName': '',
                'auditTime': '',
                'auditorId': '',
                'auditorName': '',
                'auditorPosition': '',
                'baseAmount': null,
                'baseCurrency': '',
                'baseCurrencyId': '',
                'baseExchangeRate': null,
                'billId': '',
                'billNo': '',
                'borgName': '',
                'changeAmount': null,
                'changeState': null,
                'contractType': null,
                'contractTypeName': '',
                'currencyId': '',
                'currencyName': '',
                'dateOfChange': '',
                'easId': '',
                'entryAndExitFee': null,
                'facilityIncomeId': '',
                'facilityIncomeName': '',
                'facilityIncomeNo': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isEas': null,
                'leaseType': null,
                'modifierId': '',
                'modifierName': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'remarks': '',
                'rmbAmount': null,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': null,
                'signatoryId': '',
                'signatoryName': '',
                'signingAddress': '',
                'signingArea': '',
                'signingAreaCode': '',
                'signingDate': '',
                'state': null,
                'tax': null,
                'taxRate': null,
                'timeOfChange': null
            },
            formLabelWidth: '180px',
            ctAddressCode: [],
            billid: '', //合同id
            currencyArr: [] //币种
        }
    },
    created () {
        //获取币种
        call.getCurrency().then(res=> {
            this.currencyArr = res
        })
    },
    mounted () {
        this.createChange()
    },
    components: {
        SelectAddr
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
            userInfo: state => state.userInfo
        })
    },
    methods: {
        //选择币种的事件
        changeCurrency () {
            const obj = this.currencyArr.find(item=>item.kvKey === this.formData.currencyName)
            this.formData.currencyId = obj.kvId
        },
        //根据id创建变更
        createChange () {
            equipmentIncome.createFacilityIncomeAdj(this.$route.query.billid).then(res=>{
                if(res.signingAreaCode) {
                    this.ctAddressCode = res.signingAreaCode.split('-')
                }
                this.formData = Object.assign(this.formData, res)
            })
        },
        // 获取地址对应中文
        getAddrLabel (val) {
            this.formData.signingArea = val.join('-')
        },
        //基本信息保存
        addSave () {
            if(this.ctAddressCode.length > 0) {
                this.formData.signingAreaCode = this.ctAddressCode.join('-') //行政编码
            }
            equipmentIncome.saveFacilityIncomeAdj(this.formData).then(()=>{
                this.clientPop('suc', '保存成功', this.handleClose)
            })
        },
        //取消
        handleClose () {
            this.$router.go(-1)
        },
    },
}

</script>

<style lang='scss' scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table{
    min-height: auto;
    background: #fff;
}
.separ{
   width: 30px;
   height: 40px;
   line-height: 18px;
   text-align: center;
}
.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep.el-input--suffix .el-input__inner {
    padding-right: 5px;
}

</style>